﻿<template>
  <div class="app-container"
       @drop="drop"
       @dragover.prevent>
    <div class="filter-title">
      <el-form label-position="right"
               label-width="80px">
        <el-form-item :label="$t('public.name')+' :'">
          <el-input v-model="listQuery.name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.name')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.linkman')+' :'">
          <el-input v-model="listQuery.linkman"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.linkman')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.mobile')+' :'">
          <el-input v-model="listQuery.mobile"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.mobile')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-button style="margin-left:20px"
                   class="filter-item"
                   type="primary"
                   icon="el-icon-search"
                   @click="handleFilter">{{ $t('table.search') }}</el-button>
        <el-button v-if="permission.add"
                   style="margin-left: 10px;float:right"
                   class="filter-item"
                   type="primary"
                   icon="el-icon-edit"
                   @click="handleCreate">{{ $t('table.add') }}</el-button>
        <el-button style="margin-left: 10px"
                   class="filter-item"
                   type="primary"
                   @click="handleRefresh">{{ $t('table.refresh') }}</el-button>
        <div v-show="!showSearchItem"
             class="showDown"
             @click="showSearchItem = true">
          <i class="el-icon-d-arrow-right"></i>
        </div>
        <div v-show="showSearchItem"
             class="showUp"
             @click="showSearchItem = false">
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </el-form>
    </div>
    <div v-show="showSearchItem"
         class="filter-container">
      <el-form label-position="right"
               label-width="80px">
        <el-form-item :label="$t('public.trade')+' :'">
          <el-input v-model="listQuery.trade_name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.trade')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.region')+' :'">
          <el-input v-model="listQuery.region_name"
                    style="width: 150px"
                    class="filter-item"
                    :placeholder="$t('public.region')"
                    @keyup.enter.native="handleFilter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.status')+' :'">
          <el-select v-model="listQuery.status"
                     clearable
                     style="width: 150px"
                     class="filter-item"
                     :placeholder="$t('public.status')">
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :key="tableKey"
              v-loading="listLoading"
              :data="list"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255,255,255,0.2)"
              border
              fit
              highlight-current-row
              style="width: 100%min-height:1000px">
      <el-table-column fixed="left"
                       align="center"
                       :label="$t('table.id')"
                       width="65">
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.linkman')">
        <template slot-scope="scope">
          <span>{{ scope.row.linkman }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.mobile')">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.region')">
        <template slot-scope="scope">
          <span>{{ scope.row.region_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.trade')">
        <template slot-scope="scope">
          <span>{{ scope.row.trade_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('adMaster.number')">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('adMaster.totalSum')">
        <template slot-scope="scope">
          <span>{{ scope.row.total_sum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('ad.adCurrency')">
        <template slot-scope="scope">
          <span>{{ scope.row.ad_currency }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('ad.extraCurrency')">
        <template slot-scope="scope">
          <span>{{ scope.row.extra_currency }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('ad.preAdCurrency')">
        <template slot-scope="scope">
          <span>{{ scope.row.prepayment_ad_currency }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('ad.preExtraCurrency')">
        <template slot-scope="scope">
          <span>{{ scope.row.prepayment_extra_currency }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       show-overflow-tooltip
                       :label="$t('public.createTime')">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('public.status')">
        <template slot-scope="scope">
          <span :class="colorSpeicial(scope.row.check_status,scope.row.status)">{{ statuSpeicial(scope.row.check_status,scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       :label="$t('weChat.bindingsNumber')">
        <template slot-scope="scope">
          <span>{{ scope.row.wx.length }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       align="center"
                       :label="$t('weChat.particular')"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="(typeof (scope.row.wx)==='object' && scope.row.wx.constructor===Array) && scope.row.wx.length > 0"
                     type="primary"
                     size="mini"
                     @click="handleUntied(scope.row)">{{ $t('weChat.untied') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       align="center"
                       :label="$t('table.actions')"
                       :width="operWidth"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     @click="handleRead(scope.row)">{{ $t('table.read') }}</el-button>
          <el-button v-if="permission.update"
                     type="primary"
                     size="mini"
                     :disabled="(scope.row.check_status === 1 || scope.row.check_status ===3)?false:true"
                     @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button v-if="scope.row.status === 1 && scope.row.check_status !== 1 && scope.row.check_status !==3 && permission.review"
                     type="danger"
                     size="mini"
                     @click="handleDisable(scope.row)">{{ $t('table.disable') }}</el-button>
          <el-button v-else-if="scope.row.check_status !== 1 && scope.row.check_status !==3 && permission.review"
                     type="success"
                     size="mini"
                     @click="handleEnable(scope.row)">{{ $t('table.enable') }}</el-button>
          <el-button v-if="(scope.row.check_status === 1 || scope.row.check_status ===3) && permission.review"
                     type="primary"
                     size="mini"
                     @click="handleReview(scope.row)">{{ $t('table.review') }}</el-button>
          <el-button v-if="permission.del"
                     size="mini"
                     type="danger"
                     :disabled="(scope.row.check_status === 1 || scope.row.check_status ===3)?false:true"
                     @click="handleModifyStatus(scope.row,'deleted')">{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background
                     :current-page="listQuery.page"
                     :page-sizes="[10,20,30,50]"
                     :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
    <!-- 编辑 -->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormVisible"
               width="950px">
      <el-form ref="dataForm"
               :rules="rules"
               :model="temp"
               label-position="right"
               label-width="35%"
               style="width: 400px margin:auto"
               size="small">
        <div class="pops">
          <div class="popUp left">
            <span class="information-title">基础信息:</span>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('public.name')+' :'">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('public.name')+' :'"
                          prop="name">
              <el-input v-model="temp.name"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('public.linkman')+' :'">
              <span>{{ temp.linkman }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('public.linkman')+' :'"
                          prop="linkman">
              <el-input v-model="temp.linkman"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('public.mobile')+' :'">
              <span>{{ temp.mobile }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('public.mobile')+' :'"
                          prop="mobile">
              <el-input v-model="temp.mobile"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('public.trade')+' :'">
              <span>{{ temp.trade_name }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('public.trade')+' :'"
                          prop="trade_ids">
              <el-input v-model="temp.trade_ids"
                        style="display:none"></el-input>
              <select-page :id="temp.trade_ids"
                           v-model="temp.trade_ids"
                           :name="temp.trade_name"
                           style="width:200px"
                           placeholder="请选择行业"
                           key-field="id"
                           show-field="name"
                           :data="industryOptions"
                           :count="industryCount"
                           :page-size="pageSize"
                           @getList="getIndustryList"
                           @values="getIndustryid"></select-page>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('public.region')+' :'">
              <span>{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('public.region')+' :'"
                          prop="region_id">
              <el-input v-model="temp.region_id"
                        style="display:none"></el-input>
              <select-page :id="temp.region_id"
                           :name="temp.region_name"
                           style="width:200px"
                           placeholder="请选择区域"
                           key-field="id"
                           show-field="name"
                           :data="areaOptions"
                           :count="areaCount"
                           :page-size="pageSize"
                           @getList="getAreaList"
                           @values="getAreaid"></select-page>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.address')+' :'">
              <span>{{ temp.address_detail }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.address')+' :'"
                          prop="address_detail">
              <el-input v-model="temp.address_detail"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.accountType')+' :'">
              <span>{{ temp.address_detail }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.accountType')+' :'"
                          prop="account_type">
              <el-select v-model="temp.account_type"
                         placeholder="请选择">
                <el-option v-for="item in accountTypeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <span class="information-title">支付信息:</span>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.bankAccountName')+' :'">
              <span>{{ temp.bank_account_name }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.bankAccountName')+' :'"
                          prop="bank_account_name">
              <el-input v-model="temp.bank_account_name"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.bankAccountNumber')+' :'">
              <span>{{ temp.bank_account_number }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.bankAccountNumber')+' :'"
                          prop="bank_account_number">
              <el-input v-model="temp.bank_account_number"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.bankName')+' :'">
              <span>{{ temp.bank_name }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.bankName')+' :'"
                          prop="bank_name">
              <el-input v-model="temp.bank_name"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.bankAddress')+' :'">
              <span>{{ temp.bank_address }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.bankAddress')+' :'"
                          prop="bank_address">
              <el-input v-model="temp.bank_address"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus=='review'"
                          :label="$t('public.checkStatus')+' :'"
                          prop="check_status">
              <el-radio-group v-model="temp.check_status">
                <el-radio :label="1"
                          disabled>审核中</el-radio>
                <el-radio :label="2">审核通过</el-radio>
                <el-radio :label="3">未通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="dialogStatus=='review' && temp.check_status === 3"
                          :label="$t('public.auditOpinion')+' :'"
                          prop="check_remark">
              <el-input v-model="temp.check_remark"
                        type="textarea"></el-input>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">认证信息:</span>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.cardNo')+' :'">
              <span>{{ temp.card_no }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.cardNo')+' :'"
                          prop="card_no">
              <el-input v-model="temp.card_no"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.cardElectronic1')+' :'">
              <li v-if="temp.card_electronic_1"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.card_electronic_1+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
              </li>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.cardElectronic1')+' :'"
                          prop="card_electronic_1">
              <el-input v-model="temp.card_electronic_1"
                        style="display:none"></el-input>
              <li v-if="temp.card_electronic_1"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.card_electronic_1+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <i class="el-icon-close"
                   @click="changPicture('card_electronic_1')"></i>
                <i class="el-icon-close-tip"></i>
              </li>
              <el-upload v-else
                         v-loading="pictureLoading"
                         class="upload-demo"
                         drag
                         action="#"
                         :show-file-list="false"
                         :http-request="(e)=>{return updatePicture(e,'card_electronic_1', 'pictureLoading')}"
                         width="200px">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.cardElectronic')+' :'">
              <div class="pops doublePops">
                <div class="popUp">
                  <li v-if="temp.card_electronic_2"
                      tabindex="0"
                      class="el-upload-list__item is-success"
                      style="width:100%;display:block;">
                    <img :src="temp.card_electronic_2+'?x-oss-process=image/auto-orient,1'"
                         alt
                         class="el-upload-list__item-thumbnail"
                         style="width:100%;height:auto;" />
                  </li>
                </div>
                <div class="popUp davlou">
                  <li v-if="temp.card_electronic_3"
                      tabindex="0"
                      class="el-upload-list__item is-success"
                      style="width:100%;display:block;">
                    <img :src="temp.card_electronic_3+'?x-oss-process=image/auto-orient,1'"
                         alt
                         class="el-upload-list__item-thumbnail"
                         style="width:100%;height:auto" />
                  </li>
                </div>
              </div>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.cardElectronic')+' :'"
                          prop="ID_card_photo">
              <el-input v-model="ID_card_photo"
                        style="display:none"></el-input>
              <div class="pops doublePops">
                <div class="popUp">
                  <li v-if="temp.card_electronic_2"
                      tabindex="0"
                      class="el-upload-list__item is-success"
                      style="width:100%;display:block;">
                    <img :src="temp.card_electronic_2+'?x-oss-process=image/auto-orient,1'"
                         alt
                         class="el-upload-list__item-thumbnail"
                         style="width:100%;height:auto;" />
                    <label class="el-upload-list__item-status-label">
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </label>
                    <i class="el-icon-close"
                       @click="changPicture('card_electronic_2')"></i>
                    <i class="el-icon-close-tip"></i>
                  </li>
                  <el-upload v-else
                             v-loading="pictureLoading2"
                             class="upload-demo"
                             drag
                             action="#"
                             :show-file-list="false"
                             :http-request="(e)=>{return updatePicture(e,'card_electronic_2', 'pictureLoading2')}">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或
                      <em>点击上传</em>
                    </div>
                  </el-upload>
                </div>
                <div class="popUp davlou">
                  <li v-if="temp.card_electronic_3"
                      tabindex="0"
                      class="el-upload-list__item is-success"
                      style="width:100%;display:block;">
                    <img :src="temp.card_electronic_3+'?x-oss-process=image/auto-orient,1'"
                         alt
                         class="el-upload-list__item-thumbnail"
                         style="width:100%;height:auto" />
                    <label class="el-upload-list__item-status-label">
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </label>
                    <i class="el-icon-close"
                       @click="changPicture('card_electronic_3')"></i>
                    <i class="el-icon-close-tip"></i>
                  </li>
                  <el-upload v-else
                             v-loading="pictureLoading3"
                             class="upload-demo"
                             drag
                             action="#"
                             :show-file-list="false"
                             :http-request="(e)=>{return updatePicture(e,'card_electronic_3', 'pictureLoading3')}">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或
                      <em>点击上传</em>
                    </div>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.businessLicenceNumber')+' :'">
              <span>{{ temp.business_licence_number }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.businessLicenceNumber')+' :'"
                          prop="business_licence_number">
              <el-input v-model="temp.business_licence_number"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.businessLicence')+' :'">
              <li v-if="temp.business_licence_number_electronic"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.business_licence_number_electronic+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
              </li>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.businessLicence')+' :'"
                          prop="business_licence_number_electronic">
              <el-input v-model="temp.business_licence_number_electronic"
                        style="display:none"></el-input>
              <li v-if="temp.business_licence_number_electronic"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.business_licence_number_electronic+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <i class="el-icon-close"
                   @click="changPicture('business_licence_number_electronic')"></i>
                <i class="el-icon-close-tip"></i>
              </li>
              <el-upload v-else
                         v-loading="pictureLoading4"
                         class="upload-demo"
                         drag
                         action="#"
                         :show-file-list="false"
                         :http-request="(e)=>{return updatePicture(e,'business_licence_number_electronic', 'pictureLoading4')}"
                         width="200px">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.organizationCode')+' :'">
              <span>{{ temp.organization_code }}</span>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.organizationCode')+' :'"
                          prop="organization_code">
              <el-input v-model="temp.organization_code"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus==='review'"
                          :label="$t('adMaster.organizationCodeElectronic')+' :'">
              <el-input v-model="temp.organization_code_electronic"
                        style="display:none"></el-input>
              <li v-if="temp.organization_code_electronic"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.organization_code_electronic+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
              </li>
            </el-form-item>
            <el-form-item v-else
                          :label="$t('adMaster.organizationCodeElectronic')+' :'"
                          prop="organization_code_electronic">
              <el-input v-model="temp.organization_code_electronic"
                        style="display:none"></el-input>
              <li v-if="temp.organization_code_electronic"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.organization_code_electronic+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <i class="el-icon-close"
                   @click="changPicture('organization_code_electronic')"></i>
                <i class="el-icon-close-tip"></i>
              </li>
              <el-upload v-else
                         v-loading="pictureLoading5"
                         class="upload-demo"
                         drag
                         action="#"
                         :show-file-list="false"
                         :http-request="(e)=>{return updatePicture(e,'organization_code_electronic', 'pictureLoading5')}"
                         width="200px">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button v-if="dialogStatus=='create'"
                   type="primary"
                   :disabled="!createDisabled"
                   @click="createData">{{ $t('table.confirm') }}</el-button>
        <el-button v-else-if="dialogStatus=='update'"
                   type="primary"
                   :disabled="!updateDisabled"
                   @click="updateData">{{ $t('table.confirm') }}</el-button>
        <el-button v-else-if="dialogStatus=='review'"
                   type="primary"
                   :disabled="reviewDisabled"
                   @click="reviewData">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormRead">
      <el-form :model="temp"
               label-position="right"
               label-width="40%"
               style="width: 400px margin-left:120px">
        <div class="pops">
          <div class="popUp left">
            <span class="information-title">基础信息:</span>
            <el-form-item :label="$t('public.name')+' :'">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.linkman')+' :'">
              <span>{{ temp.linkman }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.mobile')+' :'">
              <span>{{ temp.mobile }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.trade')+' :'">
              <span>{{ temp.trade_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.region')+' :'">
              <span>{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.address')+' :'">
              <span>{{ temp.address_detail }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.accountType')+' :'">
              <span>{{ accountTypeEs(temp.account_type) }}</span>
            </el-form-item>
            <span class="information-title">支付信息:</span>
            <el-form-item :label="$t('adMaster.bankAccountName')+' :'">
              <span>{{ temp.bank_account_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.bankAccountNumber')+' :'">
              <span>{{ temp.bank_account_number }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.bankName')+' :'">
              <span>{{ temp.bank_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.bankAddress')+' :'">
              <span>{{ temp.bank_address }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.checkStatus')+' :'">
              <span>{{ statuSpeicial(temp.check_status, temp.status) }}</span>
            </el-form-item>
            <el-form-item v-if="temp.check_status === 3"
                          :label="$t('public.auditOpinion')+' :'">
              <span>{{ temp.check_remark }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">认证信息:</span>
            <el-form-item :label="$t('adMaster.cardNo')+' :'">
              <span>{{ temp.card_no }}</span>
            </el-form-item>
            <el-form-item v-if="temp.card_electronic_1"
                          :label="$t('adMaster.cardElectronic1')+' :'">
              <li v-if="temp.card_electronic_1"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.card_electronic_1+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
              </li>
            </el-form-item>
            <el-form-item v-if="temp.card_electronic_2"
                          :label="$t('adMaster.cardElectronic')+' :'">
              <div class="pops doublePops">
                <div class="popUp">
                  <li v-if="temp.card_electronic_2"
                      tabindex="0"
                      class="el-upload-list__item is-success"
                      style="width:100%;display:block;">
                    <img :src="temp.card_electronic_2+'?x-oss-process=image/auto-orient,1'"
                         alt
                         class="el-upload-list__item-thumbnail"
                         style="width:100%;height:auto;" />
                  </li>
                </div>
                <div class="popUp davlou">
                  <li v-if="temp.card_electronic_3"
                      tabindex="0"
                      class="el-upload-list__item is-success"
                      style="width:100%;display:block;">
                    <img :src="temp.card_electronic_3+'?x-oss-process=image/auto-orient,1'"
                         alt
                         class="el-upload-list__item-thumbnail"
                         style="width:100%;height:auto" />
                  </li>
                </div>
              </div>
            </el-form-item>
            <el-form-item :label="$t('adMaster.businessLicenceNumber')+' :'">
              <span>{{ temp.business_licence_number }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.businessLicence')+' :'">
              <li v-if="temp.business_licence_number_electronic"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.business_licence_number_electronic+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
              </li>
            </el-form-item>
            <el-form-item :label="$t('adMaster.organizationCode')+' :'">
              <span>{{ temp.organization_code }}</span>
            </el-form-item>
            <el-form-item :label="$t('adMaster.organizationCodeElectronic')+' :'">
              <el-input v-model="temp.organization_code_electronic"
                        style="display:none"></el-input>
              <li v-if="temp.organization_code_electronic"
                  tabindex="0"
                  class="el-upload-list__item is-success"
                  style="width:100%;display:block;padding: 0 5px;">
                <img :src="temp.organization_code_electronic+'?x-oss-process=image/auto-orient,1'"
                     alt
                     class="el-upload-list__item-thumbnail"
                     style="width:100%;height:auto" />
              </li>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog v-loading="untiedLoading"
               title="解绑"
               :visible.sync="untiedVisible"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(255,255,255,0.2)">
      <div style="text-align:center">
        <div v-for="(items, key, index) in wxShow"
             class="message">
          <div class="avatar">
            <img :src="items.headimg" />
          </div>
          <div class="nickname">
            <span>{{ items.nickname }}</span>
          </div>
          <div class="close">
            <i class="el-icon-close"
               @click="addUntied(items, key)"></i>
          </div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="untiedVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary"
                   @click="changgeUntied">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import selectPage from "@/views/select/SelectPage"; // 分页选择控件

export default {
  name: "BaseDataAd",
  components: {
    "select-page": selectPage
  },
  data() {
    const validateName = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 20) {
          callback(new Error("名称长度不能大于20个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)[\u4e00-\u9fff\w]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error("名称只能包含汉字、英文、“_”和数字且不为纯数字或纯符号")
            );
          }
        }
      } else {
        callback(new Error("请填写名称"));
      }
    };
    const validateLinkman = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 16) {
          callback(new Error("名称长度不能大于16个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)(?!(\、+)$)[\u4e00-\u9fff\w\、]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error(
                "联系人只能包含汉字、英文、“_”、“（”、“）”和数字且不为纯数字或纯符号"
              )
            );
          }
        }
      } else {
        callback(new Error("请填写联系人"));
      }
    };
    const bankAccountName = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 16) {
          callback(new Error("长度不能大于16个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)(?!(\、+)$)[\u4e00-\u9fff\w\、]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error(
                "银行开户名只能包含汉字、英文、“_”、“（”、“）”和数字且不为纯数字或纯符号！"
              )
            );
          }
        }
      } else {
        callback(new Error("请填写银行开户名！"));
      }
    };
    const bankAccountNumber = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        var reg = /^([1-9]{1})(\d{14}|\d{18})$/; /* 银行卡号验证 */
        if (reg.test(value)) {
          /* 进行验证 */
          callback();
        } else {
          callback(new Error("请输入正确的银行账号！"));
        }
      } else {
        callback(new Error("请填写银行账号！"));
      }
    };
    const validateLinkmanMobile = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        var reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/; /* 定义验证表达式 */
        if (reg.test(value)) {
          /* 进行验证 */
          callback();
        } else {
          callback(new Error("请输入正确的联系电话！"));
        }
      } else {
        callback(new Error("请填写联系电话！"));
      }
    };
    const IDCardNo = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; /* 大陆身份证额验证 */
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的身份证号！"));
        }
      } else {
        callback(new Error("请填写身份证号！"));
      }
    };
    const businessLicenceNumber = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        var reg = /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/; /* 营业执照验证 */
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的营业执照号！"));
        }
      } else {
        callback(new Error("请填写营业执照号！"));
      }
    };
    const organizationCode = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        var reg = /^(11|12|13|19|51|52|53|59|91|92|93|Y1)\d{6}\w{9}\w$/; /* 组织机构代码验证 */
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的组织机构代码！"));
        }
      } else {
        callback(new Error("请填写组织机构代码！"));
      }
    };
    const IDCardPhoto = (rule, value, callback) => {
      // return false
      if (this.temp.card_electronic_2 && this.temp.card_electronic_3) {
        callback();
      } else {
        callback(new Error("请上传身份证正反面照片！"));
      }
    };
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      statusOptions: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 2,
          label: "禁用"
        },
        {
          value: 3,
          label: "审核中"
        },
        {
          value: 4,
          label: "未通过"
        }
      ],
      accountTypeOptions: [
        {
          value: 1,
          label: "预付费"
        },
        {
          value: 2,
          label: "月结算"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        id: undefined
      },
      temp: {
        id: undefined,
        name: "",
        linkman: "",
        mobile: "",
        status: "",
        trade_ids: "",
        trade_name: "",
        region_id: "",
        region_name: "",
        address_detail: "",
        account_type: "",
        bank_account_name: "",
        bank_account_number: "",
        bank_name: "",
        bank_address: "",
        card_no: "",
        card_electronic_1: "",
        card_electronic_2: "",
        card_electronic_3: "",
        business_licence_number: "",
        business_licence_number_electronic: "",
        organization_code: "",
        organization_code_electronic: "",
        check_status: "",
        check_remark: ""
      },
      wxShow: [],
      untied: [],
      pid: "",
      dialogFormVisible: false,
      dialogFormRead: false,
      dialogStatus: "",
      textMap: {
        update: "更新",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [{ required: true, trigger: "blur", validator: validateName }],
        linkman: [
          { required: true, trigger: "blur", validator: validateLinkman }
        ],
        mobile: [
          { required: true, trigger: "blur", validator: validateLinkmanMobile }
        ],
        trade_ids: [
          { required: true, message: "请选择行业", trigger: "change" }
        ],
        region_id: [
          { required: true, message: "请选择区域", trigger: "change" }
        ],
        status: [{ required: true, message: "请审核", trigger: "change" }],
        address_detail: [
          { required: true, message: "公司地址", trigger: "blur" }
        ],
        account_type: [
          { required: true, message: "账号类型", trigger: "change" }
        ],
        bank_account_name: [
          { required: true, trigger: "blur", validator: bankAccountName }
        ],
        bank_account_number: [
          { required: true, trigger: "blur", validator: bankAccountNumber }
        ],
        bank_name: [
          {
            required: true,
            message: "请输入开户银行支行名称",
            trigger: "blur"
          }
        ],
        bank_address: [
          { required: true, message: "开户银行所在地", trigger: "blur" }
        ],
        card_no: [{ required: true, trigger: "blur", validator: IDCardNo }],
        card_electronic_1: [
          { required: true, message: "请上传手持身份证照片", trigger: "change" }
        ],
        ID_card_photo: [
          { required: true, trigger: "change", validator: IDCardPhoto }
        ],
        business_licence_number: [
          { required: true, trigger: "blur", validator: businessLicenceNumber }
        ],
        business_licence_number_electronic: [
          { required: true, message: "请上传电子版营业执照", trigger: "change" }
        ],
        organization_code: [
          { required: true, trigger: "blur", validator: organizationCode }
        ],
        organization_code_electronic: [
          {
            required: true,
            message: "请上传电子版组织机构代码",
            trigger: "change"
          }
        ],
        check_status: [
          { required: true, message: "请审核", trigger: "change" }
        ],
        check_remark: [
          { required: true, message: "请填写拒绝理由", trigger: "blur" }
        ]
      },
      createDisabled: true,
      updateDisabled: true,
      reviewDisabled: false,
      loading: false,
      industryOptions: [],
      areaOptions: [],
      areaCount: undefined,
      industryCount: undefined,
      pageSize: 20,
      permission: {
        add: false,
        del: false,
        update: false,
        review: false
      },
      pictureLoading: false,
      pictureLoading2: false,
      pictureLoading3: false,
      pictureLoading4: false,
      pictureLoading5: false,
      untiedLoading: false,
      untiedVisible: false
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.permission.del) {
        itemCount += 1;
      }
      if (this.permission.update) {
        itemCount += 1;
      }
      if (this.permission.review) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    },
    ID_card_photo: function() {
      return this.temp.card_electronic_2 + this.temp.card_electronic_3;
    }
  },
  created() {
    if (this.$store.state.permission.jurisdiction === "*") {
      this.permission.add = true;
      this.permission.del = true;
      this.permission.update = true;
      this.permission.review = true;
    } else {
      const jurisdiction = this.$store.state.permission.jurisdiction.split(",");
      jurisdiction.forEach(element => {
        const id = parseInt(element);
        if (id === 131) {
          this.permission.add = true;
        } else if (id === 133) {
          this.permission.del = true;
        } else if (id === 132) {
          this.permission.update = true;
        } else if (id === 223) {
          this.permission.review = true;
        }
      });
    }
    this.getList();
  },
  methods: {
    handleUntied(row) {
      this.untied = [];
      this.wxShow = JSON.parse(JSON.stringify(row.wx)); // copy obj
      this.pid = row.id;
      this.untiedVisible = true;
    },
    addUntied(data, index, key) {
      this.wxShow.splice(index, 1);
      this.untied.push(data.openid);
    },
    changgeUntied() {
      if (this.untied.length > 0) {
        const adCancelPath = {
          company: "STQ",
          api: "pc_ad_cancel",
          version: "1.0",
          data: {
            id: this.pid,
            openid: this.untied.join(","),
            type: 1
          }
        };
        this.socketApi.sendSock(JSON.stringify(adCancelPath), res => {
          this.socketData(res);
        });
      } else {
        this.$message.error("请选择解绑账号！");
      }
    },
    getAreaList(pageNumber = 1, search = "") {
      this.getArea(pageNumber, search);
    },
    getAreaid(data) {
      if (data.length > 0) {
        this.temp.region_id = data[0].id;
        this.temp.region_name = data[0].name;
      } else {
        this.temp.region_id = undefined;
        this.temp.region_name = "";
      }
    },
    getIndustryList(pageNumber = 1, search = "") {
      this.getIndustry(pageNumber, search);
    },
    getIndustryid(data) {
      if (data.length > 0) {
        this.temp.trade_ids = data[0].id;
        this.temp.trade_name = data[0].name;
      } else {
        this.temp.trade_ids = undefined;
        this.temp.trade_name = "";
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page
      };
      if (this.listQuery.name) {
        data["name"] = this.listQuery.name;
      }
      if (this.listQuery.linkman) {
        data["linkman"] = this.listQuery.linkman;
      }
      if (this.listQuery.mobile) {
        data["mobile"] = this.listQuery.mobile;
      }
      if (this.listQuery.trade_name) {
        data["trade_name"] = this.listQuery.trade_name;
      }
      if (this.listQuery.region_name) {
        data["region_name"] = this.listQuery.region_name;
      }
      if (this.listQuery.status) {
        if (this.listQuery.status === 1 || this.listQuery.status === 2) {
          data["check_status"] = 2;
          data["status"] = this.listQuery.status;
        } else {
          if (this.listQuery.status === 3) {
            data["check_status"] = 1;
          } else if (this.listQuery.status === 4) {
            data["check_status"] = 3;
          }
        }
      }
      const adIndexPath = {
        // 获取视广告主档案列表
        company: "STQ",
        api: "pc_ad_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(adIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleModifyStatus(row) {
      this.$confirm("此操作将永久删除该广告主信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const adDeletePath = {
            company: "STQ",
            api: "pc_ad_delete",
            version: "1.0",
            data: {
              id: row.id
            }
          };
          this.socketApi.sendSock(JSON.stringify(adDeletePath), res => {
            if (res) {
              this.socketData(res);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: "",
        linkman: "",
        mobile: "",
        status: "",
        trade_ids: "",
        trade_name: "",
        region_id: "",
        region_name: "",
        address_detail: "",
        account_type: "",
        bank_account_name: "",
        bank_account_number: "",
        bank_name: "",
        bank_address: "",
        card_no: "",
        card_electronic_1: "",
        card_electronic_2: "",
        card_electronic_3: "",
        business_licence_number: "",
        business_licence_number_electronic: "",
        organization_code: "",
        organization_code_electronic: "",
        check_status: "",
        check_remark: ""
      };
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        id: undefined
      };
      this.getList();
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleDisable(row) {
      const adEditPath = {
        company: "STQ",
        api: "pc_ad_edit",
        version: "1.0",
        data: {
          id: row.id,
          status: 2
        }
      };
      this.socketApi.sendSock(JSON.stringify(adEditPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 启用失败 ");
        }
        setTimeout(() => {
          this.updateDisabled = true;
        }, 1000);
      });
    },
    handleEnable(row) {
      const adEditPath = {
        company: "STQ",
        api: "pc_ad_edit",
        version: "1.0",
        data: {
          id: row.id,
          status: 1
        }
      };
      this.socketApi.sendSock(JSON.stringify(adEditPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 禁用失败 ");
        }
        setTimeout(() => {
          this.updateDisabled = true;
        }, 1000);
      });
    },
    createData() {
      // 添加广告主档案
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.createDisabled) {
            this.createDisabled = false;
            const data = {
              id: this.temp.id,
              name: this.temp.name,
              linkman: this.temp.linkman,
              mobile: this.temp.mobile,
              trade_ids: this.temp.trade_ids,
              trade_name: this.temp.trade_name,
              region_id: this.temp.region_id,
              region_name: this.temp.region_name,
              address_detail: this.temp.address_detail,
              account_type: this.temp.account_type,
              bank_account_name: this.temp.bank_account_name,
              bank_account_number: this.temp.bank_account_number,
              bank_name: this.temp.bank_name,
              bank_address: this.temp.bank_address,
              card_no: this.temp.card_no,
              card_electronic_1: this.temp.card_electronic_1,
              card_electronic_2: this.temp.card_electronic_2,
              card_electronic_3: this.temp.card_electronic_3,
              business_licence_number: this.temp.business_licence_number,
              business_licence_number_electronic: this.temp
                .business_licence_number_electronic,
              organization_code: this.temp.organization_code,
              organization_code_electronic: this.temp
                .organization_code_electronic
            };
            const adAddPath = {
              company: "STQ",
              api: "pc_ad_add",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(adAddPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.createDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    handleReview(row) {
      // 打开审核弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "review";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleUpdate(row) {
      // 打开编辑弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormRead = true;
    },
    reviewData(statu) {
      // 审核广告主信息
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.reviewDisabled) {
            this.updateDisabled = true;
            const data = {
              id: this.temp.id,
              check_status: this.temp.check_status,
              check_remark: this.temp.check_remark
            };
            const adEditPath = {
              company: "STQ",
              api: "pc_ad_check",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(adEditPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.reviewDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    updateData() {
      // 更新广告主信息
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.updateDisabled) {
            this.updateDisabled = false;
            const data = {
              id: this.temp.id,
              name: this.temp.name,
              linkman: this.temp.linkman,
              mobile: this.temp.mobile,
              trade_ids: this.temp.trade_ids,
              trade_name: this.temp.trade_name,
              region_id: this.temp.region_id,
              region_name: this.temp.region_name,
              address_detail: this.temp.address_detail,
              account_type: this.temp.account_type,
              bank_account_name: this.temp.bank_account_name,
              bank_account_number: this.temp.bank_account_number,
              bank_name: this.temp.bank_name,
              bank_address: this.temp.bank_address,
              card_no: this.temp.card_no,
              card_electronic_1: this.temp.card_electronic_1,
              card_electronic_2: this.temp.card_electronic_2,
              card_electronic_3: this.temp.card_electronic_3,
              business_licence_number: this.temp.business_licence_number,
              business_licence_number_electronic: this.temp
                .business_licence_number_electronic,
              organization_code: this.temp.organization_code,
              organization_code_electronic: this.temp
                .organization_code_electronic
            };
            const adEditPath = {
              company: "STQ",
              api: "pc_ad_edit",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(adEditPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.updateDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    // 行业选择
    getIndustry(pageNumber, search) {
      const industryIndexPath = {
        company: "STQ",
        api: "pc_trade_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize,
          type: 2
        }
      };
      this.socketApi.sendSock(JSON.stringify(industryIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getArea(pageNumber, search) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_region_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    updatePicture(element, name, loading) {
      this[loading] = true;
      const video = new FormData();
      video.append("video", element.file);
      const index = element.file.name.lastIndexOf(".");
      const suffix = element.file.name.substr(index + 1).toLowerCase();
      if (this.imageFile.indexOf(suffix) !== -1) {
        this.updateFile(video, result => {
          if (result.data.code === 0) {
            this.$message.error(result.data.message);
          } else {
            this.temp[name] = result.data.data.video_url;
          }
          this[loading] = false;
        });
      } else {
        this.$message.error("请上传图片文件");
        this[loading] = false;
        return false;
      }
    },
    changPicture(name) {
      this.$confirm("是否删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const index = this.temp[name].lastIndexOf("/");
          const str = this.temp[name].substring(
            index + 1,
            this.temp[name].length
          );
          const video_name = { video_name: str };
          this.deleteFile(video_name, result => {
            if (result.data.code === 0) {
              this.$message.error(result.data.message);
            } else {
              this.temp[name] = "";
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_ad_index") {
            this.total = resj.count;
            this.list = resj.data;
            console.log('this.list', this.list);
            this.listLoading = false;
          } else if (resj.api === "pc_ad_add") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_ad_edit") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_ad_check") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "审核成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_ad_delete") {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else if (resj.api === "pc_region_index") {
            const options = [];
            resj.data.forEach(element => {
              options.push({ id: element.id, name: element.region_name });
            });
            this.areaOptions = options;
            this.areaCount = resj.count;
          } else if (resj.api === "pc_trade_index") {
            this.industryOptions = resj.data;
            this.industryCount = resj.count;
          } else if (resj.api === "pc_ad_edit") {
            this.getList();
          } else if (resj.api === "pc_ad_cancel") {
            this.untiedVisible = false;
            this.$notify({
              title: "成功",
              message: "解绑成功",
              type: "success",
              duration: 2000
            });
            this.getList();
          }
        }
      }
    },
    statuSpeicial(check_statu, statu) {
      if (parseInt(check_statu) === 1) {
        return "审核中";
      } else if (parseInt(check_statu) === 2) {
        let res = "审核通过";
        if (parseInt(statu) === 1) {
          res = "正常";
        } else {
          res = "禁用";
        }
        return res;
      } else if (parseInt(check_statu) === 3) {
        return "未通过";
      }
    },
    colorSpeicial(check_statu, statu) {
      if (parseInt(check_statu) === 2) {
        let res = "colorGreen";
        if (parseInt(statu) === 1) {
          res = "colorGreen";
        } else {
          res = "colorRed";
        }
        return res;
      } else if (parseInt(check_statu) === 3) {
        return "colorRed";
      }
    },
    drop(event) {
      event.preventDefault();
    }
  }
};
</script>
<style scoped>
.message {
  display: table;
  margin: auto;
}
.message div {
  padding: 0 5px;
  display: table-cell;
  vertical-align: middle;
}
.message .nickname {
  min-width: 100px;
}
.message .avatar img {
  width: 80px;
  border-radius: 40px;
}
.message .close i {
  cursor: pointer;
}
</style>
